import { Text, StyleSheet, View, SafeAreaView, ScrollView, TextInput, Button, Alert, Image, ToastAndroid } from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage';
import React, { Component } from 'react'
import { Svg } from 'react-native-svg';
import axios from 'axios';


export default class Loggin extends Component {

    constructor() {
        super()
        this.state = {
            isLoggin: false,
            familyCode: '',
        };
    }


    componentDidMount() {
        console.log("componentDidMount:")
        this.getData()
    }

    getData = async () => {
        try {
            const value = await AsyncStorage.getItem('isLoggin')
            this.setState({
                isLoggin: value === null ? false : value
            })
            console.log("value 2 " + JSON.stringify(this.state.isLoggin))
        } catch (errror) {
            console.log("get data err:" + errror)
        }
    }

    handleButtonClick = async () => {
        try {
            // const res = await axios.post('http://192.168.0.187:3000/users', { id: this.state.familyCode }, {
            //     headers: {
            //         'Content-Type': 'application/json'
            //     }
            // })
            const res = await axios.get(`http://192.168.0.187:3000/users/1?${new URLSearchParams({code : this.state.familyCode}).toString()}`)
            console.log("res " + JSON.stringify(res.data))
            const {status, reason} = res.data
            console.log("status " + status + ", reason " + reason)
            if (status === 1) {
                ToastAndroid.show("邀请码正确！", ToastAndroid.SHORT)
            } else {
                ToastAndroid.show("邀请码错误！", ToastAndroid.SHORT)
            }
        } catch (error) {
            ToastAndroid.show("网络出错！", ToastAndroid.SHORT)
        }
    }

    render() {
        return (
            <SafeAreaView style={[{ backgroundColor: '#fff', flex: 1 }]}>
                <View style={[styles.container]}>
                    <Text style={[styles.text]}> -Welcome- </Text>
                    <TextInput
                        style={[styles.input]}
                        placeholder='请输入家庭邀请码'
                        value={this.state.familyCode}
                        onChangeText={(text) => {
                            this.setState({
                                familyCode: text
                            })
                        }}
                    />
                    <View style={styles.btn}>
                        <Button
                            title='确认'
                            onPress={this.handleButtonClick}
                        />
                    </View>
                </View>

                <View style={[styles.imageContainer]} >
                    <Image
                        style={{ width: 70, height: 70 }}
                        source={require('../../images/icon-sanyecao.png')}
                    />
                </View>
            </SafeAreaView>
        )
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 4,
        // backgroundColor: '#999',
        // padding: 20,
        justifyContent: 'center'
        // height: 200,
        // alignContent : 'center',
        // alignItems : 'center',
    },

    text: {
        fontSize: 30,
        alignSelf: 'center',
    },

    input: {
        // backgroundColor : '#a00',
        borderBlockColor: 'orangered',
        borderWidth: 2,
        width: '50%',
        alignSelf: 'center',
        marginTop: 30,
    },

    btn: {
        width: '50%',
        alignSelf: 'center',
        marginTop: 30,
    },

    imageContainer: {
        // backgroundColor: 'orangered',
        flex: 1,
        alignItems: 'center',
        // justifyContent : 'flex-end'
        justifyContent: 'flex-end',
        marginBottom: 30
        // alignSelf: 'center',
    },

})